<template>
	<view class="question6">
		<view class="top">
			<image src="/static/icon/white-back.png" @tap="nav" />
			<view>售后详情</view>
		</view>
		<view class="bg"></view>
		<view class="header">
			<view class="title">订单信息</view>
			<view class="header_item">{{info.order.room_no + info.order.room_type}} {{ info.order.storey}}楼</view>
			<view class="header_item">{{info.order.room_type_alias}} {{info.order.amount}}元</view>
			<view class="header_item">订单编号：{{info.order.order_sn}}</view>
			<view class="header_item">申请时间：{{info.create_time}}</view>
		</view>
		<view class="bg_"></view>
		<view class="question_title">反馈信息</view>
		<view class="item" v-if="info.handle_result">
			<view class="item_title">
				<image class="image1" src="/static/icon/bangshou.png"></image>
				<view>审核结果</view>
			</view>
			<view class="content" v-if="info.feedback_state == 1">{{info.handle_result}}</view>
			<view class="content" v-if="info.feedback_state == 2">
				<image src="/static/order/th.png" mode=""></image>
				{{info.handle_result}}
			</view>
			<view class="time">2019-06-13 13:00</view>
		</view>

		<view class="item">
			<view class="item_title">
				<image class="image2" src="/static/icon/user.png"></image>
				<view>申请理由</view>
			</view>
			<view class="content">{{info.desc}}</view>
			<image class="reason" v-if="Array.isArray(info.image)" v-for="item in info.image" :key="item.id" :src="item + '?imageView2/1/w/444/h/334'"></image>
			<view class="time">{{info.time}}</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	export default {
		data() {
			return {
				show: false,
				info: {}
			};
		},
		onLoad(e) {
			this.feedback(e.id)
		},
		methods: {
			nav() {
				uni.navigateBack();
			},
			feedback(id) {
				this.getReq({
					url: 'both/feedback/' + id
				}).then(data => {
					let [err, res] = data;
					if (err || res.data.status == 0) {
						this.showToast('请稍后重试！');
						return;
					}
					let info = res.data.data.info;
					info.image = JSON.parse(info.image)
					info.time = moment(info.create_time * 1000).format('YYYY-MM-DD HH:mm');
					this.info = info
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.question6 {
		.top {
			width: 750upx;
			padding-top: var(--status-bar-height);
			height: 86upx;
			background-color: #3595f9;
			position: fixed;
			left: 0;
			top: 0;
			font-size: 36upx;
			color: #fff;
			text-align: center;
			line-height: 86upx;

			image {
				position: absolute;
				width: 32upx;
				height: 32upx;
				left: 27upx;
				bottom: 27upx;
			}
		}

		.bg_ {
			width:750upx;
			height: 20upx;
			background-color: #f8f8f8;
		}

		.bg {
			width: 750upx;
			background-color: #fff;
			/* #ifdef APP-PLUS */
			height: calc(var(--status-bar-height) + 86upx);
			/* #endif */
			/* #ifndef APP-PLUS */
			height: 136upx;
			/* #endif */
		}

		.header {
			width: 702upx;
			height: 262upx;
			padding: 30upx 24upx;
			background-color: #ffffff;

			.title {
				font-size: 32upx;
				line-height: 72upx;
			}

			.header_item {
				font-size: 28upx;
				line-height: 48upx;
			}
		}

		.question_title {
			padding: 50upx 24upx 0 24upx;
			font-size: 32upx;			
			line-height: 1;
		}

		.item {
			width: 702upx;
			padding: 0 24upx;

			.item_title {
				font-size: 32upx;
				padding: 30upx 0 22upx 0;
				display: flex;
				align-items: center;

				.image1 {
					width: 90upx;
					height: 36upx;
					margin-right: 12upx;
				}

				.image2 {
					width: 54upx;
					height: 36upx;
					margin-right: 12upx;
				}
			}

			.reason:nth-last-of-type(3) {
				margin-right: 0;
			}

			.reason {
				margin-top: 20upx;
				width: 222upx;
				height: 167upx;
				background-color: #337fc3;
				border-radius: 8upx;
				margin-right: 18upx;
			}

			.content {
				font-size: 28upx;
				line-height: 1.5em;
				image{
					width: 40rpx;
					height: 40rpx;
					vertical-align: -6rpx;
					margin-right: 10rpx;
				}
			}

			.time {
				font-size: 24upx;
				text-align: right;
				padding: 22upx 0 50upx 0;
			}
		}
	}
</style>
